<template>
  <div class="Breadcrumb">
    <el-breadcrumb separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path" :to="item.to">
          <el-icon :size="16" v-if="index === 0">
            <HomeFilled />
          </el-icon>
          <span v-else>{{ item.meta.title }}</span>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router'
export default {
  setup() {
    const $route = useRoute()
    const breadcrumbList = computed(() => {
      return $route.matched.map((v, i) => {
        return {
          ...v,
          to: i <= $route.matched.length - 2 && v.redirect !== $route.matched[i + 1].path ? v.path : ''
        }
      })
    })
    return {
      breadcrumbList
    }
  }
}
</script>

<style lang="scss" scoped>
.Breadcrumb {
  .el-breadcrumb {
    display: flex;
  }
}
</style>